<template>
    <el-dialog title="详情" :visible.sync="open" width="50%" append-to-body
        :before-close="closeDelDialog">
        <el-form ref="form" :model="form" :rules="rules" label-width="140px" class="margin_top">
            <el-row>

                <el-col :span="12">
                    <el-form-item label="鉴定任务名称 " prop="jiandingrenwuname">
                        <el-input v-model="form.jiandingrenwuname" placeholder="请输入鉴定任务名称" maxlength="30" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="档案门类" prop="categoryId">
                        <el-select v-model="form.categoryId" placeholder="请选择档案门类" style="width:100%"
                            @change="changeSelectTap" disabled>
                            <el-option v-for="item in deptOptions" :key="item.id" :label="item.label" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="批次号" prop="renwuno">
                        <el-input v-model="form.renwuno" placeholder="请输入批次号" readonly disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="全宗号" prop="qzh">

                        <el-input v-model="qzhName" placeholder="请选择" maxlength="20" readonly
                        disabled />
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="鉴定任务创建日期" prop="jiandingstartdate">
                        <el-input v-model="form.jiandingstartdate" placeholder="请输入鉴定任务创建日期" readonly
                        disabled/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="鉴定组组长" prop="jiandingleader">
                        <treeselect v-model="form.jiandingleader" :options="userTreeList" placeholder="请选择鉴定组组长"
                            :disable-branch-nodes="true" :normalizer="normalizer" noOptionsText="暂无数据" disabled :style="isStyle?'line-height: 32px;height: 32px;font-size:12px':'line-height: 36px;height: 36px;font-size:14px'"  />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="初审组人员" prop="chushenpeople">
                        <!--     @deselect="deSelectPatenteeidsDepart" // 选择项被取消时的函数
                         @select="selectPatenteeidsDepart"  //选择项被选择时的函数 -->
                        <treeselect v-model="form.chushenpeople" :options="userTreeList" placeholder="请选择初审组人员"
                            :disable-branch-nodes="true" :multiple="true" @deselect="deSelectPatenteeidsDepart"
                            @select="selectPatenteeidsDepart" :normalizer="normalizer" noOptionsText="暂无数据" disabled :style="isStyle?'line-height: 32px;height: 32px;font-size:12px':'line-height: 36px;height: 36px;font-size:14px'"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="复审组人员" prop="fushenpeople">
                        <!--     @deselect="deSelectPatenteeidsDepart" // 选择项被取消时的函数
                         @select="selectPatenteeidsDepart"  //选择项被选择时的函数 -->
                        <treeselect v-model="form.fushenpeople" :options="userTreeList" placeholder="请选择复审组人员"
                            :disable-branch-nodes="true" :multiple="true" @deselect="deSelectPatenteeidsDepart1"
                            @select="selectPatenteeidsDepart1" :normalizer="normalizer" noOptionsText="暂无数据" disabled  :style="isStyle?'line-height: 32px;height:32px;font-size:12px':'line-height: 36px;height:36px;font-size:14px'"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="审定组人员" prop="shendingpeople">

                        <treeselect v-model="form.shendingpeople" :options="userTreeList" placeholder="请选择审定组人员"
                            :disable-branch-nodes="true" :normalizer="normalizer" noOptionsText="暂无数据" disabled :style="isStyle?'line-height: 32px;height:32px;font-size:12px':' line-height: 36px;height:36px;font-size:14px'"/>

                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注">
                        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-table :data="tableFlieData" height="250" border style="width: 86.5%;float:right"
                        header-align="center">
                        <el-table-column type="index" label="序号" align="center" header-align="center">
                        </el-table-column>
                        <el-table-column prop="FILE_NAME" label="附件名称" align="center" header-align="center">
                        </el-table-column>
                        <el-table-column label="密级" v-if="isFbState">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.MJ" placeholder="请选择文件密级" disabled>
                                    <el-option v-for="(item, idx) in renyuanOptions" :key="idx" :label="item.dictLabel"
                                        :value="item.dictValue" ></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="FILE_SIZE" label="附件大小" align="center" header-align="center">
                            <template slot-scope="scope">
                                {{ scope.row.FILE_SIZE | changeType }}
                            </template>
                        </el-table-column>

                    </el-table>
                </el-col>
            </el-row>

        </el-form>

    </el-dialog>
</template>
<script>
import {listGROUPTree} from "@/api/archive/archivalAppraisal/openness/openArchivesAppraisal"//档案门类树
import { getusertree, addjob, getjobinfo, deletefile, updatejobinfo,editcate} from "@/api/archive/archivalAppraisal/bgqx/openArchivesAppraisal"
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import zdyfileUpload from "@/components/FileUpload/zdyIndex.vue" //文件上传
import { getDicts_archive } from '@/api/archive/dict/dictManageData'
import { fbstat } from "@/api/archive/fileCollection/offlinReception.js";
import {
    getdamjbyrymj
} from "@/api/archive/fileCollection/offlinReception.js";
export default {
    components: { Treeselect, zdyfileUpload },
    props: ['open', 'rowInfo'],
    watch: {
        rowInfo: {
            handler(valNew) {
                if (this.$store.getters.size == 'small') {

                   this.isStyle = true
                   $(".vue-treeselect__value-container").css("height","32px")

               } else {
                $(".vue-treeselect__value-container").css("height","36px")
                   this.isStyle = false
               }
                if (valNew != undefined) { //修改
                    this.$modal.loading("正在加载...");
                    $(".el-loading-mask").css("z-index", "9999")
                    this.getDeptSelect(valNew)   //门类列表
                    this.editcatePost(valNew)
                } else { //添加
                    //获取当前时间
                    const date = new Date()
                    const year = date.getFullYear()
                    const month = ('0' + (date.getMonth() + 1)).slice(-2)
                    const day = ('0' + date.getDate()).slice(-2)
                    this.form.jiandingstartdate = year + "-" + month + "-" + day;
                    //获取当前时间戳
                    this.form.renwuno = new Date().getTime() * 1000;
                }
            }, immediate: true
        }
    },
    filters: {
        changeType(val) {
            if (val == "0") return "0B";
            var k = 1024;
            var sizes = ["B", "KB", "MB", "GB", "TB"];
            // console.log('Math.log(val)', Math.log(val));
            // console.log('Math.log(k)', Math.log(k));
            let i = Math.floor(Math.log(val) / Math.log(k));//得出该数字的单位应该是kB?MB
            return (val / Math.pow(k, i)).toPrecision(3) + "" + sizes[i];
        },
    },
    data() {
        return {
            isDis: false, //设置添加接口是否请求到，如果请求到isDis设置true
            isDisabled:"allow",//设置是否可以修改，
            form: {
                jiandingrenwuname: undefined,
                categoryId: undefined,
                renwuno: undefined,
                remark: undefined,
                qzh: undefined,
                chushenpeople: undefined,
                jiandingleader: undefined,
                fushenpeople: undefined,
                shendingpeople: undefined,
                jiandingstartdate: undefined
            },
            qzhName: undefined,
            uploadData: undefined,//上传携带的参数
            uploadValue: undefined, //选择上传的文件
            fileSize: 25,
            deptOptions: [],//档案门类下拉
            userTreeList: [],
            tableFlieData: [],//文件列表数据
            value: [], //判断当前是否又文件列表数据，如果有，修改渲染，如果是【】，清空之前的数据
            uploadFileUrl: process.env.VUE_APP_BASE_API + "/archive/isopenidentify/upload",
            rules: {
                jiandingrenwuname: [{ required: true, message: '请输入鉴定任务名称', trigger: 'blur' }],
                categoryId: [
                    { required: true, message: '请选择档案门类', trigger: 'blur' },
                ],
                jiandingleader:[{required: true, message: '请选择鉴定组长', trigger: 'blur' }],
                chushenpeople:[{required: true, message: '请选择初审组人员', trigger: 'blur' }],
                fushenpeople:[{required: true, message: '请选择复审组人员', trigger: 'blur' }],
                shendingpeople:[{required: true, message: '请选择审定组人员', trigger: 'blur' }],
            }
        }

    },
    created() {
        //门类列表
        this.getDeptSelect();
        //人员列表
        this.getusertreeList();
        fbstat().then(res => {  //false=不是分保，true=是分保 
            this.isFbState = res.data
            if (this.isFbState) {
            //密级下拉列表
            getDicts_archive("MJ").then(res => { //人员密级
                getdamjbyrymj().then(resdata => { //此接口没有返回dictLabel，需要组装接口
                    var mjdata = [];
                    for (var i in resdata.data) {
                        for (var j in res.data) {
                            if (resdata.data[i].daMj == res.data[j].dictValue) {
                                mjdata.push(res.data[j])
                            }
                        }
                    }
                    this.renyuanOptions = mjdata

                })
            })
        }
        })
    },
    methods: {
        //判断修改时档案门类是否禁用
        editcatePost(valNew){
            editcate(valNew.ID).then(res=>{
                console.log(res)
                this.isDisabled=res.msg
            })
        },

        // 只能选择数据下面有children 的数据，没有children的时候禁用复选框
        normalizer(node) {
            // console.log(node,"++111111111111111++")
            if (node.type == 'd') {
                if (node.children == undefined) {
                    node["children"] = undefined
                    node['isDisabled'] = true;
                }

            }
            //去掉children=[]的children属性
            // if (node.children && !node.children.length) {
            //     delete node.children;
            // }
            // if (node.isLeaf == 'Y' && node.typeLevel != 3) {
            //     node['isDisabled'] = true;
            // }
            // return {
            //     id: node.typeId,
            //     label: node.typeName,
            //     children: node.children,
            // }
        },
        /** 档案门类列表*/
        getDeptSelect(valNew) {
            listGROUPTree().then(response => {

                for (var i in response.data[0].children) {
                    for (var j in response.data[0].children[i].children) {
                        response.data[0].children[i].children[j].parentId = response.data[0].children[i].id;
                        response.data[0].children[i].children[j].parentLabel = response.data[0].children[i].label;
                        response.data[0].children[i].children[j].fondsCode = response.data[0].children[i].fondsCode
                        this.deptOptions.push(response.data[0].children[i].children[j])
                        if (valNew != undefined) { //修改
                            getjobinfo(valNew.ID).then(res => {
                                console.log(res.data.jobinfo.JIANDINGLEADER, "lsdfjskl")
                                if (res.data.jobinfo.CHUSHENPEOPLE != undefined && res.data.jobinfo.CHUSHENPEOPLE != "") {
                                    this.form.chushenpeople = res.data.jobinfo.CHUSHENPEOPLE.split(",")
                                }
                                if (res.data.jobinfo.JIANDINGLEADER != undefined) {
                                    this.form.jiandingleader = res.data.jobinfo.JIANDINGLEADER.split(",")

                                }
                                if (res.data.jobinfo.FUSHENPEOPLE != undefined && res.data.jobinfo.FUSHENPEOPLE != "") {
                                    this.form.fushenpeople = res.data.jobinfo.FUSHENPEOPLE.split(",")
                                }
                                if (res.data.jobinfo.SHENDINGPEOPLE != undefined) {
                                    this.form.shendingpeople = res.data.jobinfo.SHENDINGPEOPLE.split(",")
                                }
                                this.form.remark = res.data.jobinfo.REMARK;
                                this.form.jiandingrenwuname = res.data.jobinfo.JIANDINGRENWUNAME;
                                this.form.qzh = res.data.jobinfo.QZH;
                                this.form.renwuno = res.data.jobinfo.RENWUNO;
                                this.form.jiandingstartdate = res.data.jobinfo.JIANDINGSTARTDATE;
                                this.form.categoryId = res.data.jobinfo.categoryId;
                                this.qzhName = this.deptOptions.find(item => item.id == this.form.categoryId).fondsCode
                                this.changeSelectTap(res.data.jobinfo.categoryId);
                                this.tableFlieData = res.data.fileinfo
                                this.uploadData = { renwuid: valNew.ID }
                                this.value = res.data.fileinfo;
                                this.$modal.closeLoading()
                            })
                        }
                    }
                }

            });
        },
        //触发档案门类下拉,根据门类ID获取当前门类下的全宗号lable
        changeSelectTap(val) {
            for (var i in this.deptOptions) {
                if (this.deptOptions[i].id == val) {
                    // console.log(this.deptOptions[i],"222222222222222222222222222222")
                    this.qzhName = this.deptOptions[i].fondsCode;
                    this.form.qzh = this.deptOptions[i].parentId;

                }
            }
        },
        //获取人员树
        getusertreeList() {
            getusertree().then(res => {
                // console.log(res, "sdlkfjkl")
                this.userTreeList = res.data;
            })
        },
        //初审组人员 @select="selectPatenteeidsDepart"  //选择项被选择时的函数 -->
        selectPatenteeidsDepart(node, instanceId) {
            if (!this.form.chushenpeople) {
                this.form.chushenpeople = [];
            }

            this.form.chushenpeople.push(node.id);

        },
        //初审组人员  @deselect="deSelectPatenteeidsDepart" // 选择项被取消时的函数-->
        deSelectPatenteeidsDepart(node, instanceId) {
            if (!this.form.chushenpeople) {
                this.form.chushenpeople = [];
            }
            let index = _.indexOf(this.form.chushenpeople, node.id);
            this.form.chushenpeople.splice(index, 1);

        },

        //复审组人员@select="selectPatenteeidsDepart"  //选择项被选择时的函数 -->
        selectPatenteeidsDepart1(node, instanceId) {
            if (!this.form.fushenpeople) {
                this.form.fushenpeople = [];
            }

            this.form.fushenpeople.push(node.id);

        },
        //复审组人员@deselect="deSelectPatenteeidsDepart" // 选择项被取消时的函数 -->
        deSelectPatenteeidsDepart1(node, instanceId) {
            if (!this.form.fushenpeople) {
                this.form.fushenpeople = [];
            }
            let index = _.indexOf(this.form.fushenpeople, node.id);
            this.form.fushenpeople.splice(index, 1);

        },
        closeDelDialog() {
            this.$emit("closeDelDialog")
        },







        /**
         * var data = 'aaa-bbb'
            //截取符号前面部分
            getCaption(data,0) //输出aaa
            //截取符号后面部分
            getCaption(data,1) //输出bbb
         */
        getCaption(obj, state) {
            var index = obj.lastIndexOf("\.");
            if (state == 0) {
                obj = obj.substring(0, index);
            } else {
                obj = obj.substring(index + 1, obj.length);
            }
            return obj;
        },

    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
    padding: 0px 30px 20px 0px !important;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}

::v-deep .el-form-item__content {
    line-height: 26px;
}


.vue-treeselect__control {
    height: inherit;
}

 .vue-treeselect__placeholder,
.vue-treeselect__single-value {
    line-height: inherit;
}
::v-deep .vue-treeselect__multi-value{
    margin: 0!important;
}

::v-deep .vue-treeselect__multi-value-item-container{
    padding: 0!important;
}
</style>
